import { Draw } from "../Draw/Draw";

/**
 * 菜单蒙版
 */

export class MenuMask {
  private draw: Draw;

  constructor(draw: Draw) {
    this.draw = draw;
  }

  public createMask() {
    this.removeMask();
    // 通过 nextTick 解决右键菜单的bug
    const root = this.draw.getRootBox();
    const maskBox = document.createElement("div");
    maskBox.className = "konva-root-menu-mask";
    maskBox.addEventListener("click", this.removeMask.bind(this));
    root.appendChild(maskBox);
    maskBox.addEventListener("contextmenu", this.removeMask.bind(this));
  }
  public removeMask() {
    const root = this.draw.getRootBox();

    // 移除蒙版
    const mask = root.querySelector(".konva-root-menu-mask");
    mask?.remove();

    // 移除子菜单
    const submenuBox = root.querySelector(".konva-root-topmenu .submenu");
    submenuBox?.remove();

    // 移除属性面板
    const ShapeSettingsBox = root.querySelector(".konva-root-shape-settings");
    ShapeSettingsBox?.remove();

    // 移除右键菜单
    const contextmenu = root.querySelector(".konva-root-container-contextmenu");
    contextmenu?.remove();
  }
}
